<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文创产品网站 - 咨询反馈</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">文创天地</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="list.html">产品列表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="content.html">产品详情</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="form.html">咨询反馈</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container my-5">
        <h1 class="text-center mb-5">咨询与反馈</h1>
        <form id="feedbackForm">
            <div class="mb-3">
                <label for="name" class="form-label">您的姓名</label>
                <input type="text" class="form-control" id="name" required>
            </div>
            <div class="mb-3">
                <label for="phone" class="form-label">您的联系电话</label>
                <input type="text" class="form-control" id="phone" required>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">您的邮箱</label>
                <input type="email" class="form-control" id="email" required>
            </div>
            <div class="mb-3">
                <label for="message" class="form-label">咨询或反馈内容</label>
                <textarea class="form-control" id="message" rows="5" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
        <!-- 用于显示提交成功提示的元素 -->
        <div id="successMessage" class="mt-3 text-success"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('feedbackForm').addEventListener('submit', function (e) {
            e.preventDefault();
            document.getElementById('successMessage').innerHTML = '提交成功';
        });
    </script>
</body>
</html>